<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日志信息</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
	</head>
	<!--引入layui的js  -->
	<script src="./layui/layui.js" charset="utf-8"></script>
	<!--引入jquery的js  -->
	<script src="./js/jquery-2.1.1.min.js" charset="utf-8"></script>
	
	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">卡号:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="card" name="card" autocomplete="off" class="layui-input" placeholder="请输入卡号">
			</div>
			
			<label class="layui-form-mid">时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginTime" name="beginTime" placeholder="请输入开始时间" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">--</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endTime" name="endTime" placeholder="请输入截至时间" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">所在资源室:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select id="rid" name="rid">
					<option value="">请选择</option>
				</select>
			</div>
			
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>


		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		<script>
			layui.use(['laydate','layer','form','table','tree','upload'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table;	//表格组件
					
					//日期控件
					laydate.render({
						elem: '#beginTime'
					});
					laydate.render({
						elem: '#endTime'
					});
					
					//获取分类，填充下拉选框的数据
					$(function() {
						$.ajax({
							type: 'get',				//提交方式 get或者post
							url: 'findAllResourceroom',					//提交url
							datatype: 'json', 			//返回数据的格式
							success: function(data) {	//成功返回之后的调用
								$.each(data, function(index, item) {
									//填充下拉列表
									$('#rid').append(new Option(item.rname, item.id)); 
								});
								layui.form.render("select");
							},
							error: function() {
								alert("获取失败！！！")
							}
						});
					})
					
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					url: 'findAllLog',					//提交到后台的地址
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
							width: 100
						},{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: '编号',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'card',
							width: 120,
							title: '卡号'
							
						}, {
							field: 'entrytime',
							width: 120,
							title: '进入时间'
						}, {
							field: 'departuretime',
							width: 180,
							title: '离开时间'
						},{
							field: 'rid',
							title: '资源室编号',
							width: 130
						}]
					]
				});
					
			
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				
			});
			
			
		</script>
	</body>
</html>
